$(function () {
    //data变量: 存储提交的参数
    var data = {
        proName: $('#search').val().trim(),
        page: 1,
        pageSize: 100
    };
    renderPro();
    // 需求一: 渲染对应搜索的内容
    function renderPro() {
        // 需求1: 获取url后面问号传递过来的参数,给搜索框赋值
        // var search = decodeURI(location.search);
        // console.log(search);//?key=耐克
        // // - 切割字符串,得到搜索部分
        // var txt = search.slice(5);
        // - 直接调用common.js中专门用来获取传递参数的函数
        var txt = getParam('key');
        
        // - 给搜索框赋值
        $('#search').val(txt);
        // - 修改data变量的proName值
        data.proName = txt;
        // - 在搜索没完成显示加载模块
        $('.lt-product').html('<div class="loading"><div>');
        setTimeout(function () {//由于本地访问,速度很快,为了显示效果故意加的,实际工作中不要加

            // 需求2: 渲染对应的商品
            // - 发送请求获取数据
                $.ajax({
                url: '/product/queryProduct',
                data: data,
                dataType: 'json',
                success: function (info) {
                    console.log(info);
                    $('.lt-product').html(template('tmp-pro', info));
                }
            })

        }, 500);

    }

    //需求2:  点击搜索, 渲染对应的商品

    $('#btn_search').on('click', function () {
        //调用搜索函数的封装
        search();
        //txt为空就return掉，注意： 这里会有一个坑，因为后台是进行模糊匹配的，空代表全匹配到，会渲染所有数据 
        if (!txt) {
            return;
        }
        data.proName = txt;
        data.page = 1;
        data.pageSize = 100;
        console.log(data);
        // - 在搜索没完成显示加载模块
        $('.lt-product').html('<div class="loading"><div>');
        //发送请求进行渲染
        setTimeout(function () {
            $.ajax({
                url: '/product/queryProduct',
                data: data,
                dataType: 'json',
                success: function (info) {
                    console.log(info);
                    $('.lt-product').html(template('tmp-pro', info));
                }
            });
        }, 500);

    });

    // 需求3 排序功能点击效果实现
    // - 注册事件
    // - 点击价格和库存,显示高亮效果(排他)current类
    // - 切换 fa-angle-down 和 fa-angle-up类
    // - 判断箭头方向,当箭头向下:降序 向上: 升序（1升序，2降序）
    // - 判断当前点击的是 价格 还是库存
    // - 发送ajax请求,进行升降序排序
    $('.pric, .num').on('click', function () {
        data = {
            proName: $('#search').val().trim(),
            page: 1,
            pageSize: 100
        };
        // - 如果当前没有current类，就先添加current类，有就切换 fa-angle-down 和 fa-angle-up类
        if (!$(this).hasClass('current')) {
            // - 当前的高亮显示,排他
            $(this).addClass('current').siblings().removeClass('current');
        } else {
            // - 切换 fa-angle-down 和 fa-angle-up类
            $(this).find('span').toggleClass('fa-angle-up').toggleClass('fa-angle-down');
        }
        // - 判断箭头方向,当箭头向下:降序 向上: 升序（1升序，2降序）
        var sort = $(this).find('span').hasClass('fa-angle-up') ? 1 : 2;
        // - 判断当前点击的是 价格 还是库存
        // console.log($(this).hasClass('num'));
        var type = $(this).hasClass('num') ? 'num' : 'price';
        // - 给上传的对象,添加参数
        data[type] = sort;//注意type是字符串类型,只能用[]语法
        console.log(data);
        // - 在搜索没完成显示加载模块
        $('.lt-product').html('<div class="loading"><div>');
        // - 发送ajax请求,进行升降序排序
        setTimeout(function () {

            $.ajax({
                url: '/product/queryProduct',
                data: data,
                dataType: 'json',
                success: function (info) {
                    console.log(info);
                    $('.lt-product').html(template('tmp-pro', info));
                }
            });
        }, 500);
    });



});